(function(){
	//1.自己求大图片高度和宽度 1200
	//注意：offsetWidth/offsetHeight---->元素必须显示的，才能求出值，否则为0
	//     不隐藏的、隐藏的元素:window.getComputedStyle(ele).attr 来求值，但是带单位
	let mark=document.querySelector(".mark");//红色小盒子
	let leftbox=document.querySelector(".leftbox");//左侧小盒子
	let rightbox=document.querySelector(".rightbox");//右侧小盒子
	let bigimg=document.getElementById("bigimg");//大图片
	
	//专求隐藏元素的高度和宽度（隐藏,不隐藏)
	const getWH=function getWH(ele,attr){
		return parseInt(window.getComputedStyle(ele)[attr]) 
	}
	
	//红色小盒子
	let markW=getWH(mark,"width");
	let markH=getWH(mark,"height");
	
	//左侧小盒子
	let leftBoxW=leftbox.offsetWidth;
	let leftBoxH=leftbox.offsetHeight;
	
	//右侧小盒子
	let rightBoxW=getWH(rightbox,"width");
	let rightBoxH=getWH(rightbox,"height");
	
	//大图片的高度和宽度
	let bigimgW=leftBoxW*rightBoxW/markW;
	let bigimgH=leftBoxH*rightBoxH/markH;
	
	//求大图片的高度和宽度
	bigimg.style.width=bigimgW+"px";
	bigimg.style.height=bigimgH+"px";
	
	//红色小盒子 最大移动范围
	let maxW=leftBoxW-markW;
	let maxH=leftBoxH-markH;
	
	const move=function move(e){
		//console.log(e.target);
		//坐标：事件发生时鼠标相对于事件源元素的坐标
		//console.log("offset",e.offsetX);//注意：红色盒子的offsetX(鼠标在哪个元素身上),并不是左侧小盒子
		
		//左侧小盒子的初始坐标 pageX/clientX
		let startX=e.pageX;
		let startY=e.pageY;
		
		//左侧小盒子距离 整个页面顶部的距离
		let t=leftbox.offsetTop;
		//左侧小盒子距离 整个页面左部的距离
		let l=leftbox.offsetLeft;
		
		//红色小盒子的最终位置
		let marktop=startY-t-markH/2;
		let markleft=startX-l-markW/2;
		
		//设置移动范围
		marktop=marktop<0?0:(marktop>maxH?maxH:marktop);
		markleft=markleft<0?0:(markleft>maxW?maxW:markleft);
		
		mark.style.left=markleft+"px";
		mark.style.top=marktop+"px";
		
		//大图片的最终的位置
		bigimg.style.top="-" +(bigimgH/leftBoxH*marktop)+"px";
		bigimg.style.left="-" +(bigimgW/leftBoxW*markleft)+"px";
	}
	
	//左侧小盒子移入,  红色小盒子，右侧小盒子出现
	leftbox.onmouseenter=function(e){
		mark.style.display="block";//红色小盒子显示
		rightbox.style.display="block";//右侧小盒子显示
		move(e);//移入，立刻求坐标
	}
	
	//左侧小盒子移出,  红色小盒子，右侧小盒子隐藏
	leftbox.onmouseleave=function(){
		mark.style.display="none";//红色小盒子隐藏
		rightbox.style.display="none";//右侧小盒子隐藏
	}
	
	//1. 鼠标一直在红色小盒子正中间
	//2. 鼠标（范围）在左侧小盒子里面移动，改变红色小盒子的位置
	leftbox.onmousemove=move;
})()